<script setup lang="ts">
import {
  Layout,
  LayoutHeader,
  LayoutSider,
  LayoutContent,
  LayoutFooter,
} from "ant-design-vue";
import { shallowRef } from "vue";
import UserInfo from "./components/UserInfo.vue";
import Playlist from "./components/Playlist.vue";
import MusicLibrary from "./components/MusicLibrary.vue";
import PlaylistDetail from "./components/PlaylistDetail.vue";
import MusicPlayer from "./components/MusicPlayer.vue";
import { useStore } from "./stores/";
const store = useStore();

const playlistRef = shallowRef(Playlist);
const onPlaylistChange = () => {
  playlistRef.value.loadData();
};
</script>
<template>
  <Layout style="height: 100%">
    <LayoutHeader><UserInfo></UserInfo> </LayoutHeader>
    <Layout>
      <LayoutSider
        theme="light"
        :width="250"
        style="padding: 8px; background-color: rgb(232, 232, 232)"
      >
        <Playlist ref="playlistRef"></Playlist>
      </LayoutSider>
      <Layout>
        <LayoutContent>
          <MusicLibrary v-if="store.curPlaylist == undefined"></MusicLibrary>
          <PlaylistDetail
            v-else
            :playlist="store.curPlaylist"
            @change="onPlaylistChange"
          ></PlaylistDetail>
        </LayoutContent>
        <LayoutFooter style="padding: 0">
          <MusicPlayer></MusicPlayer>
        </LayoutFooter>
      </Layout>
    </Layout>
  </Layout>
</template>

<style scoped>
.btn {
  font-size: #000;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
}
.btn:hover {
  background-color: rgb(181, 181, 181);
}
.active {
  background-color: rgb(181, 181, 181);
}
</style>
